<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上下文关键字处理器</title>
    <style>
        body {
            font-family: Arial;
            padding: 20px;
        }
        textarea {
            width: 100%;
            height: 150px;
            margin: 10px 0;
            display: block;

        }
        button {
            padding: 8px 15px;
            background: #4CAF50;
            color: white;
            border: none;
        }
        #result {
            white-space: pre-wrap;
            /*不设置高度那么到时候高度有文字撑开*/
            background: #f5f5f5;
            padding: 10px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
<h1>上下文关键字处理</h1>
<textarea id="inputText" placeholder="请输入文本，每行一句话...&#10;例如：&#10;A third way for styles to&#10;be combined is to"></textarea>
<button onclick="processText()">处理文本</button>
<div id="result"></div>

<script>
    function processText() {
        // 1. 获取输入框中的文本
        var inputElement = document.getElementById("inputText");
		//所有数据，换行处以\n的形式存在
        var inputText = inputElement.value;

        // 检查是否为空
		//trim是去除前后间的空格
        if (inputText.trim() === "") {
            alert("请输入文本！");
            return;//结束函数
            //如果你没有结束函数，那么可能后面将会执行
            //但是你此时没有输入如果让后面执行了就有点不太正常了
        }

        // 2. 按行分割文本并去除空行
		//lines存的是字符串数组的地址
        var lines = inputText.split("\n");//切割字符串的得到的是数组
        //调试：将lines中的数组输出
        for (let i = 0; i < lines.length; i++) {
            console.log(lines[i]);
        }
        //去掉空格行
        console.log("============================");
        var nonEmptyLines = [];
        for (var i = 0; i < lines.length; i++) {
            if (lines[i].trim() !== "") {
                nonEmptyLines.push(lines[i]);
            }
        }
        console.log(nonEmptyLines);

        // 3. 对每行文本进行循环移动
        var allMovedLines = [];
        for (var j = 0; j < nonEmptyLines.length; j++) {
            var line = nonEmptyLines[j];
            var words = line.split(" ");

            // 对每个单词位置进行循环移动
            for (var k = 0; k < words.length; k++) {
                var movedLine = [];

                // 从当前位置k开始拼接
                for (var m = k; m < words.length; m++) {
                    movedLine.push(words[m]);
                }

                // 补充前面的单词
                for (var n = 0; n < k; n++) {
                    movedLine.push(words[n]);
                }

                // 将移动后的句子加入结果数组
                //join是将数组的所有元素转为字符串，各个元素之间以空格分开
                allMovedLines.push(movedLine.join(" "));//每一次存入一个元素到allMovedLines中这个元素是字符串
            }
        }
        //测试一下
        console.log(allMovedLines);

        // 4. 对结果进行排序
        //sort() 方法用于对数组的元素进行排序。
        // 排序顺序可以是字母或数字，并按升序或降序。
        // 默认排序顺序为按字母升序。
        /**
         *
         * sort() 方法用于对数组的元素进行排序。
         *
         * 排序顺序可以是字母或数字，并按升序或降序。
         *
         * 默认排序顺序为按字母升序。
         * *******************************************
         * array.sort(sortfunction)
         * 参数 Values
         * 参数	描述
         * sortfunction	可选。规定排序顺序。必须是函数。
         * **********************************************
         * JavaScript 的 sort() 方法详解
         * 1. sort() 方法的基本原理
         * sort() 是 JavaScript 数组的一个方法，用于对数组元素进行排序。默认情况下（不传比较函数），
         * 它会将元素转换为字符串，然后按照 Unicode 码点顺序排序。
         *
         * 基本用法：
         * javascript
         * let fruits = ['banana', 'apple', 'orange'];
         * fruits.sort(); // ['apple', 'banana', 'orange']
         * 问题：数字排序会出错
         * javascript
         * let numbers = [10, 5, 40, 25];
         * numbers.sort(); // [10, 25, 40, 5] ← 错误结果！
         * 这是因为默认按照字符串比较，"10" < "5"（因为比较第一个字符 '1' < '5'）
         *
         * 2. 使用比较函数的 sort()
         * 为了解决上述问题，我们需要传入一个比较函数：
         *
         * javascript
         * array.sort(compareFunction)
         * 比较函数的规则：
         * 接收两个参数（通常命名为 a 和 b），代表当前比较的两个元素
         *
         * 必须返回一个数字：
         *
         * 负数：a 应该排在 b 前面
         *
         * 正数：a 应该排在 b 后面
         *
         * 0：a 和 b 保持原顺序
         *
         * 3. 你的代码解析
         * javascript
         * allMovedLines.sort(function(a, b) {
         *     if (a < b) return -1;  // a应该在b前面
         *     if (a > b) return 1;   // a应该在b后面
         *     return 0;              // 顺序不变
         * });
         * 逐步解释：
         * a 和 b 是数组中的任意两个元素（字符串）
         *
         * 比较逻辑：
         *
         * 如果 a < b（按字母顺序a在b前），返回 -1 → a 排在前面
         *
         * 如果 a > b（按字母顺序a在b后），返回 1 → a 排在后面
         *
         * 如果相等，返回 0 → 保持原顺序
         *
         * 实际排序过程：
         * 假设 allMovedLines = ["cat", "apple", "dog"]:
         *
         * 比较 "cat" 和 "apple":
         *
         * "apple" < "cat" → 返回 -1 → ["apple", "cat", "dog"]
         *
         * 比较 "cat" 和 "dog":
         *
         * "cat" < "dog" → 顺序不变
         *
         * 最终结果：["apple", "cat", "dog"]
         *
         * 4. 简化写法
         * 现代 JavaScript 可以简化为：
         *
         * javascript
         * // 字符串排序（升序）
         * allMovedLines.sort((a, b) => a.localeCompare(b));
         *
         * // 数字排序（升序）
         * numbers.sort((a, b) => a - b);
         *
         * // 数字排序（降序）
         * numbers.sort((a, b) => b - a);
         * 5. 为什么需要比较函数？
         * 因为 JavaScript 是弱类型语言，sort() 不知道你想按什么规则排序。比较函数明确告诉它：
         *
         * 如何比较两个元素
         *
         * 谁应该排在前面
         *
         * 总结
         * 情况	比较函数返回值	排序结果
         * a < b	负数（如-1）	a排在b前
         * a > b	正数（如1）	a排在b后
         * a == b	0	顺序不变
         * 这种设计让 sort() 非常灵活，可以自定义各种排序规则！
         */
        //法一：
        // allMovedLines.sort(function(a, b) {
        //     if (a < b) return -1;
        //     if (a > b) return 1;
        //     return 0;
        // });
        //法二：
        allMovedLines.sort();
        // 5. 显示结果
        var resultElement = document.getElementById("result");
        //将class为result的div中文本内容设置为allMovedLines数组中的内容
        resultElement.textContent = allMovedLines.join("\n");//join是将数组的所有元素转为字符串，各个元素之间以换行分开
    }
</script>
</body>
</html>